<template>
  <view class="detail-crad">
    <view class="user-ranking">
      <view class="user">
        <TImage
          :src="avatarImage"
          width="64rpx"
          height="64rpx"
          errorImgType="person"
          borderRadius="64rpx"
        ></TImage>
        <text class="name">{{ name }}</text>
      </view>
      <view class="btn" @click="handleClick">完整表单</view>
    </view>
    <slot></slot>
  </view>
</template>
<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  defineProps({
    avatarImage: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      default: '',
    },

  });
  const emtis = defineEmits(['click']);
  const handleClick = () => {
    emtis('click');
  };
</script>
<style lang="scss" scoped>
  .detail-crad {
    padding: 24rpx 32rpx;
    border-radius: 16rpx;
    background-color: white;

    .user-ranking {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;
      .user {
        display: flex;
        align-items: center;
        gap: 16rpx;
        .name {
          font-size: 36rpx;
          line-height: 48rpx;
        }
      }
      .btn {
        padding: 8rpx 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        line-height: 32rpx;
        background-color: #f2f3f5;
        border-radius: 24rpx;
      }
    }
  }
</style>
